<!--
 * @FileDescription: 优惠券内容
 * @Author: Versient
 * @Date: 2024-11-24 18:49:01
 * @LastEditors: Versient
 * @LastEditTime: 2024-12-07 14:39:27
-->
<template>
  <view style="poaition: reactive">
    <view class="header-nav" :style="{height: safeAreaTop + 'px'}">
      <image
        @click="backHandle"
        :style="{ top: backTop + 'px' }"
        src="/static/show.png"
        mode="aspectFill"
        class="back"
      />
    </view>
    <image src="/static/huiyuan.png" mode="aspectFill" class="activity-image" />

    <view class="container" v-if="type != 3">
      <view class="header">
        <view class="tab" :class="{ active: isNew }" @click="switchTab(1, true)">
          <view class="tab-content">新店活动</view>
          <view class="notch" v-if="isNew"></view>
        </view>
        <view class="tab" :class="{ active: !isNew }" @click="switchTab(2, false)">
          <view class="tab-content">日常活动</view>
          <view class="notch" v-if="!isNew"></view>
        </view>
      </view>
    </view>

    <view :class="['coupon', type == 3 && 'coupons']">
      <scroll-view
        scroll-y="true"
        show-scrollbar="true"
        :refresher-enabled="freshing"
        :refresher-triggered="triggered"
        @refresherrefresh="refresh"
        @refresherpulling="pulling"
        :style="{height: type == 3 ? 'calc(100vh - 270px)' : 'calc(100vh - 350px)'}"
      >
        <mg-coupon
          :key="i"
          :co="v"
          cname="mb30"
          :color="tColor"
          @btntap="btntap(v.id)"
          v-for="(v,i) in dataList"
        ></mg-coupon>
        <jzz
          imgn="zwhb"
          :mygd="loading"
          v-if="!triggered"
          class="none-content"
          bgcolor="transparent"
          :nodata="dataList.length == 0 && isget"
        />
      </scroll-view>
    </view>
  </view>
</template>  

<script>
import mgCoupon from "@/components/common/mg-coupon.vue";
import jzz from "@/components/common/jzz.vue";

export default {
  components: { mgCoupon, jzz },
  data() {
    return {
      items: {},
      isNew: true,
      safeAreaTop: 0,
      backTop: 0,
      dataList: [],
      type: null,
      loading: false,
      isget: false,
      triggered: false,
      freshing: true
    };
  },

  onLoad(val) {
    this.type = val.type;
    this._freshing = false;
  },

  mounted() {
    const systemInfo = wx.getSystemInfoSync();
    this.safeAreaTop = systemInfo.statusBarHeight + 40;
    this.backTop = systemInfo.statusBarHeight + 10;
    this.getData();
  },
  methods: {
    switchTab(type, isNew) {
      this.isget = false;
      this.loading = false;
      this.isNew = isNew;
      this.type = type;
      this.getData();
    },

    refresh() {
      if (this._freshing) return;
      this._freshing = true;
      this.isget = false;
      this.loading = false;
      this.getData();
      setTimeout(() => {
        this.triggered = false;
        this._freshing = false;
      }, 1000);
    },

    pulling(e) {
      if (e.detail.deltaY < 0) {
        return;
      }
      this.triggered = true;
    },

    backHandle() {
      this.go({ t: 1, url: "/yb_wm/shop/reserve/index" });
    },

    async getData() {
      this.dataList = [];
      const params = { page: 1, size: 10, type: 1 };
      let { data } = await this.util.request({
        url: this.api.lqzx,
        method: "POST",
        data: params
      });
      setTimeout(() => {
        this.loading = true;
        this.isget = true;
        this.dataList = data.filter((item) => item.type == this.type)
      }, 800);
    },

    async btntap(e) {
      if (!(await this.checkLogin())) return;
      let res = await this.util.request({
        url: this.api.lqyhq,
        method: "POST",
        mask: 1,
        data: { couponId: e }
      });
      if (res) {
        this.util.message("领取成功", 1);
        setTimeout(() => this.refresh(), 500)
      }
    }
  }
};
</script>  

<style scoped lang="scss">
.header-nav {
  position: absolute;
  width: 100vw;
  top: 0;
  height: 40px;
  .back {
    width: 50rpx;
    height: 50rpx;
    position: relative;
    left: 20rpx;
    transform: rotate(90deg);
  }
}

.activity-image {
  width: 100%;
  height: 200px;
}
.container {
  width: 90%;
  margin: 15px auto;
  padding: 5px 0 0;
  // background-color: #ffffff;
  border-radius: 10px;
  // box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  padding: 8px 15px 15px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
}

.tab-content {
  font-size: 18px;
}

.tab.active {
  font-weight: bold;
}

.notch {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 3px;
  background-color: #ae690173;
  border-radius: 10px;
  transition: left 0.3s ease, width 0.3s ease;
}

.tab.active .notch {
  left: 50%;
}

.block {
  padding: 15px;
  background-color: #f1f1f1;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.coupon {
  padding: 0 20px;
}

.coupons {
  margin-top: 20px;
}
</style>